<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="//unpkg.com/alpinejs" defer></script>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family:
          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
          Arial, sans-serif;
      }

      #app {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

      .tool-line {
        position: absolute;
        top: 10px;
        left: 100px;
        z-index: 1;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 4px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }

      /* 缩放控件由 ZoomPlugin 内置插件提供 */

      #heatplant-checkboxes {
        margin-bottom: 10px;
      }

      #heatplant-checkboxes label {
        margin-right: 10px;
      }

      /* 新增内联样式，替代行内样式 */
      .zoom-display {
        margin-top: 10px;
        padding: 5px 10px;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 4px;
      }

      .section-divider {
        margin-top: 10px;
        border-top: 1px solid #ccc;
        padding-top: 10px;
      }

      .input-row {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }

      .input-field {
        margin-right: 5px;
        padding: 5px;
        width: 100px;
      }

      .btn {
        padding: 5px 10px;
        cursor: pointer;
        border-radius: 4px;
        border: none;
      }

      .btn-primary {
        background-color: #4caf50;
        color: white;
        margin-right: 10px;
      }

      .btn-secondary {
        background-color: #2196f3;
        color: white;
      }

      .btn-outline {
        background-color: transparent;
        color: inherit;
      }

      .margin-right {
        margin-right: 10px;
      }

      .margin-bottom {
        margin-bottom: 5px;
      }

      .error-border {
        border: 1px solid red;
      }

      .disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }
    </style>
    <title>Gis core example</title>
    <script>
      document.addEventListener('alpine:init', () => {
        const uiWidgets = (window.uiWidgets = {
          layersControlUi: {
            list: [],
            onChange(list) {},
            emitChange(list) {
              this.list = list;
              this.onChange(list);
            },
          },
          pidControlUi: {
            value: false,
            onChange(value) {},
            emitChange(value) {
              this.value = value;
              this.onChange(value);
            },
          },
          zoomUi: Alpine.reactive({
            value: 0,
          }),
          objInfoUpdateUi: {
            info: Alpine.reactive({
              pid: '',
              key: '',
              value: '',
            }),
            jumpTo(pid) {
              console.log('jump to', pid);
            },
            update(info) {
              console.log('update objInfo', info);
            },
          },
          mapControlUi: {
            fitView() {
              console.log('to be implemented');
            },
            toggleZoomBox() {
              console.log('toggle zoom box');
            },
          },
        });
        Alpine.data('checkboxObjtypeList', () => ({
          init() {
            console.log('alpine data checkboxObjtypeList -------');
            uiWidgets.layersControlUi.list = this.list;
          },
          list: [
            { value: 'all', label: '全部' },
            { value: 'heatplant', label: 'heatplant', checked: true },
            { value: 'energystore', label: 'energystore' },
            { value: 'partprestation', label: 'partprestation' },
            { value: 'substation', label: 'substation' },
            { value: 'pump', label: 'pump' },
            { value: 'valve', label: 'valve' },
            { value: 'measuredpoint', label: 'measuredpoint' },
            { value: 'tee', label: 'tee' },
            { value: 'connector', label: 'connector' },
            { value: 'pipeline', label: 'pipeline' },
          ],
          onChange(e) {
            const list = this.list;
            const { name, checked } = e.target;
            if (name === 'all') {
              list.forEach((cb) => (cb.checked = checked));
            } else {
              const allChecked = list.slice(1).every((cb) => cb.checked);
              list[0].checked = allChecked;
            }

            uiWidgets.layersControlUi.emitChange(this.list);
            console.log('Checkbox list changed:', this.list);
          },
        }));
        (Alpine.data('pidControl', () => ({
          init() {
            uiWidgets.pidControlUi.value = this.value;
          },
          value: false,
          onChange(e) {
            this.value = e.target.checked;
            uiWidgets.pidControlUi.emitChange(this.value);
          },
        })),
          Alpine.data('zoomView', () => ({
            zoomUi: uiWidgets.zoomUi,
          })),
          Alpine.data('objInfoUpdate', () => ({
            objInfo: uiWidgets.objInfoUpdateUi.info,
          })),
          Alpine.data('mapControl', () => ({
            zoomBoxing: false,
            toggleZoomBox() {
              this.zoomBoxing = uiWidgets.mapControlUi.toggleZoomBox();
            },
          })));
      });
    </script>
  </head>

  <body>
    <div class="tool-line">
      <div x-data="checkboxObjtypeList">
        <template x-for="cb in list" :key="cb.value">
          <label>
            <input
              type="checkbox"
              :name="cb.value"
              :value="cb.value"
              x-model="cb.checked"
              x-on:change="onChange"
            />
            <span x-text="cb.label"></span>
          </label>
        </template>
      </div>
      <label x-data="pidControl">
        <input type="checkbox" x-model="value" x-on:change="onChange" />
        显示PID
      </label>
      <div class="zoom-display" x-data="zoomView">
        当前缩放级别: <span x-text="zoomUi.value"></span>
      </div>

      <!-- 共享对象ID输入框和数据更新调试工具 -->
      <div class="section-divider" x-data="objInfoUpdate">
        <div class="input-row">
          <input
            placeholder="对象ID"
            class="input-field"
            x-model="objInfo.pid"
          />
          <button
            @click="uiWidgets.objInfoUpdateUi.jumpTo(objInfo.pid)"
            class="btn btn-primary"
          >
            跳转至对象
          </button>
          <input
            placeholder="属性键"
            class="input-field"
            x-model="objInfo.key"
          />
          <input
            placeholder="属性值"
            class="input-field"
            x-model="objInfo.value"
          />
          <button
            @click="uiWidgets.objInfoUpdateUi.update(objInfo)"
            class="btn btn-secondary"
          >
            更新数据
          </button>
        </div>
      </div>

      <!-- 地图跳转功能 -->
      <div class="section-divider" x-data="mapControl">
        <div class="input-row">
          <button
            @click="uiWidgets.mapControlUi.fitView()"
            class="btn btn-primary margin-right margin-bottom"
          >
            适配全部内容
          </button>
          <button
            @click="toggleZoomBox"
            class="btn margin-bottom"
            :class="{ 'btn-primary': zoomBoxing, 'btn-outline': !zoomBoxing }"
            x-text="zoomBoxing ? '关闭拉框缩放' : '开启拉框缩放'"
          ></button>
        </div>
      </div>
    </div>
    <div id="app"></div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
